<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
	<h:head>
		<f:facet name="first">
			<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
			<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
			<title>SnifferX</title>
			<link rel="shortcut icon"
				href="#{request.contextPath}/images/snifferX.ico" />
		</f:facet>
		<link type="text/css" rel="stylesheet"
			href="#{request.contextPath}/css/default.css" />
		<ui:insert name="customCSS"></ui:insert>
		<style type="text/css">
body {
	margin: 0;
	padding: 0;
	/***show white background***/
	background-image: url(#{request.contextPath}/images/Fedora.jpg);
	/* background-repeat: no-repeat; */
}

.no-border {
	border: none;
}

.ui-menu-child {
	background: white !important;
}

.ui-growl {
	position: absolute;
	top: 4%;
	/**left:50%;
    z-index:9999;**/
}

.ui-widget-overlay {
	background: none repeat scroll 0% 0% rgb(0, 0, 0);
	opacity: 0.3;
}

<!--
slider-->#slideshow {
	position: relative;
	height: 237px;
	width: 840px;
	border: 10px solid rgb(255, 255, 255);
	margin: 0 auto 15px;
}

#slideshow div {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
	opacity: 0.0;
	height: 195px;
	overflow: hidden;
	background-color: #FFF;
}

#slideshow div.current {
	z-index: 0;
}

#slideshow div.prev {
	z-index: -1;
}

#slideshow div img {
	display: block;
	border: 0;
	margin-bottom: 10px;
}

#slideshow div span {
	display: none;
	/**position: absolute;**/
	bottom: 0;
	left: 0;
	/* height: 50px;
	line-height: 50px; */
	/* background: #000; */
	/* color: #fff; */
	width: 840px;
	height: 237px;
}

#slideshow div.current span {
	display: block;
}
</style>



		<!-- slider -->
		<script type="text/javascript">
function slideSwitch() {
	var $current = $("#slideshow div.current");
	
	// 判断div.current个数为0的时候 $current的取值
	if ( $current.length == 0 ) $current = $("#slideshow div:last");
	
	// 判断div.current存在时则匹配$current.next(),否则转到第一个div
	var $next =  $current.next().length ? $current.next() : $("#slideshow div:first");
	$current.addClass('prev');
	
	$next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 1000, function() {
			//因为原理是层叠,删除类,让z-index的值只放在轮转到的div.current,从而最前端显示
			$current.removeClass("current prev");
		});
}

$(function() {
	$("#slideshow span").css("opacity","1.0");
	$(".current").css("opacity","1.0");
	
	// 设定时间为3秒(1000=1秒)
  	setInterval( "slideSwitch()", 3000 ); 
});
</script>
		<ui:insert name="customStyle"></ui:insert>
		<ui:insert name="customJS"></ui:insert>
		<!-- even if the pages not include the primefaces components ,jquery working also  -->
		<h:outputScript library="primefaces" name="jquery/jquery.js" />
	</h:head>
	<p:growl id="growl" showDetail="false" />
	<p:ajaxStatus onstart="PF('statusDialog').show();"
		onsuccess="PF('statusDialog').hide();" />
	<p:dialog modal="true" widgetVar="statusDialog" resizable="false"
		showHeader="false" draggable="false" closable="false">
		<h:panelGrid border="0" style="text-align:center; font-size:11px; "
			cellpadding="0" cellspacing="0" width="100%">
			<h:outputText value="Please wait..."
				style="text-align:center; font-size:11px; "></h:outputText>
			<h:graphicImage value='/images/spinner.gif' width="40" height="40"
				style="color:#1818E7"></h:graphicImage>
			<h:outputText value="Processing..."
				style="text-align:center; font-size:11px; "></h:outputText>
		</h:panelGrid>
	</p:dialog>

	<h:body>
		<p:outputPanel rendered="true">
			<div style="BACKGROUND-COLOR: #333333; width: 100%; height: 35px;">
				<!-- <img src="#{request.contextPath}/images/website_sprite.png"
					alt="some_text" style="height: 37px;" /> -->
				<h:form prependId="false" style="COLOR: #ffffff; diplay:inline">


					<div id='cssmenu'
						style="float: right; BACKGROUND-COLOR: black; border: 0px; height: 20px; background: black">
						<ul>
							<!-- show when login -->
							<li><h:panelGroup
									rendered="#{loginBean!= null ?(loginBean.currentUserDetails != null):'false'}">
									<a href='#'> <span> <h:outputText
												value="#{loginBean.user.firstName}  #{loginBean.user.lastName}" />
									</span>
									</a>
								</h:panelGroup></li>

							<li><h:panelGroup
									rendered="#{loginBean!= null ?(loginBean.currentUserDetails != null):'false'}">
									<a href='#{request.contextPath}/index.jsp'><span>Home</span></a>
								</h:panelGroup></li>
							<li class='has-sub'><h:panelGroup
									rendered="#{loginBean!= null ?(loginBean.currentUserDetails != null):'false'}">
									<a href='#'><span>File</span></a>
									<ul>
										<li><a href='#'><span>Project</span></a></li>
										<li><a href='#'><span>Menus</span></a></li>
										<li class='last'><a href='#'><span>Products</span></a></li>
									</ul>
								</h:panelGroup></li>
							<li class='has-sub'><h:panelGroup
									rendered="#{loginBean!= null ?(loginBean.currentUserDetails != null):'false'}">
									<a href='#'><span>Action</span></a>
									<ul>
										<li><a
											href='#{request.contextPath}/manage/editProfile.jsf'><span>Edit
													profile</span></a></li>
										<li class='last'><a href='#'><span>Location</span></a></li>
									</ul>
								</h:panelGroup></li>

							<li><h:panelGroup
									rendered="#{loginBean!= null ?(loginBean.currentUserDetails != null):'false'}">
									<a href='#' style="padding: 0 0px;"><span><p:graphicImage
												value="#{loginBean.user.image}" style="height:35px;" alt=" "
												cache="false">
												<f:param value="#{now.time}"></f:param>
											</p:graphicImage></span></a>
								</h:panelGroup></li>
							<li class='last'><h:panelGroup
									rendered="#{loginBean!= null ?(loginBean.currentUserDetails != null):'false'}">
									<a href='#{request.contextPath}/j_spring_security_logout'><span>Quit</span></a>
								</h:panelGroup></li>
							<!-- show when login end -->

							<!-- show when guest -->
							<li><h:panelGroup
									rendered="#{loginBean!= null ?(loginBean.currentUserDetails == null):'true'}">
									<h:commandLink id="loginCmdLnk"
										action="/login?faces-redirect=true">
										<h:outputText value="Login" />
									</h:commandLink>
								</h:panelGroup></li>
							<li><h:panelGroup
									rendered="#{loginBean!= null ?(loginBean.currentUserDetails == null):'true'}">
									<h:commandLink id="RegisterCmdbtn"
										action="/register?faces-redirect=true">
										<h:outputText value="Register" />
									</h:commandLink>
								</h:panelGroup></li>
							<!-- show when guest end -->



						</ul>
					</div>

				</h:form>
			</div>
		</p:outputPanel>





		<!-- comment here  -->
		<h:form>
			<p:stack id="stack" icon="/images/stack/stack.png" expanded="false"
				model="#{myMenuBean.model}">
			</p:stack>
		</h:form>


		<div id="wholeContent">
			<table width="100%" height="100%">
				<tr>
					<td align="center" valign="middle"><ui:insert name="content"></ui:insert>
					</td>
				</tr>
			</table>
		</div>

	</h:body>



</f:view>
</html>